<template>
  <div class="bgc_white"  id="register" :style="'height:' + height">
    <div class="login"  >
      <el-form :model="form" :rules="rules" ref="form">
        <p class="title">{{$t('REGISTER.TITLE')}}</p>
        <p class="secTitle">{{$t('REGISTER.TITLE2')}}</p>
        <p class="formTitle">{{$t('DEFAULT.SIGNEMAI')}}</p>
        <el-form-item  prop="email">
          <el-input  v-model="form.email" name="email" ></el-input>
        </el-form-item>
        <p class="formTitle">{{$t('DEFAULT.PASSWORD')}}</p>
        <el-form-item  prop="password">
          <el-input  v-model="form.password" :type="showPsw" name="password">
              <i @click="isPswShow" slot="suffix" :class="showPsw == 'password' ? 'icon-nondisplay_normal iconfont': 'iconfont icon-display_normal'  "></i>
          </el-input>
        </el-form-item>
        <el-button @click="submitForm()" :loading="isRequest"  :class="{'isFull': isFull}">{{$t('DEFAULT.SIGNIN')}}</el-button>
        <p class="link"><span @click="goTo('/signUp')">{{$t('DEFAULT.SIGNUP')}}</span>|<span @click="goTo('/forget_password')">{{$t('REGISTER.FORGETPSW')}}</span></p>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/register.js'
import { setHeight} from "@/utils/index.js"

export default {
  data () {
    return {
      height: null,
      isRequest: false,
      showPsw: 'password',
      form:{
        email: '',
        password: ''
      },
    }
  },
  computed: {
    isFull () {
      let isFull = false
      let password =  this.form.password.length > 0
      let email = this.form.email.length > 0
      if (password && email ){
        this.$refs.form.validate((valid) => {
          if(valid){
            isFull =  true
          } 
        })
      } 
      
      return isFull
    },
    rules () {
      return {
        password: [
          { required: true, trigger: 'change' },
          { min: 6, max: 12, message: this.$t('DEFAULT.MSGPWSLEN'), trigger: 'change' },
        ],
        email: [
          { required: true, trigger: 'change' },
          { type: 'email', message: this.$t('DEFAULT.CORRECTEMAIL'), trigger: 'change' },
        ],
      }
    }
  }, 
  mounted (){
    this.height = setHeight()
  },
  methods: {
    isPswShow () {
      if(this.showPsw == 'password'){
        this.showPsw = 'text'
      } else {
        this.showPsw = 'password'
      }
    },

    goTo (link) {
      this.$router.push(link)
    },
    isFormFull () {
      this.$refs.form.validate((valid) => {
        if(valid){
          this.isFull = true
        } else {
          this.isFull = false
        }
      })
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if(valid){
          this.logIn()
        } else {
          return false
        }
      })
    },
    logIn(){
      this.isRequest = true
      let params = this.form
      login(params).then(res=>{
        if(res.state == 1) {
          this.$store.dispatch('ToggleUserInfo', res.data);
          // this.$message.success('登录成功')
           this.$message.success( this.$t('DEFAULT.MSGLOGINSUCCESS'))    
          this.$router.push({path: '/'})
        }
        this.isRequest = false
      })
    },
  }
}
</script>

<style lang="scss">
@import '@/styles/register/register.scss';
.login {
  .el-form{
    top: 0px;
    margin: 64px auto;
    .el-input__suffix{
      right: 15px;
    }
  }
  .iconfont{
    cursor: pointer;
    &:hover{color: #363434;}
  }
  .el-form-item:last-of-type{
    margin-bottom: 32px;
  }
  .secTitle{
    text-align: center;
  }
  .link{
    text-align: center;
    font-size: 12px;
    margin-top: 20px;
     color: #666666;
    >span{
      cursor: pointer;
       
      &:hover{
        color: #363434;
      }
      &:first-of-type{
        margin-right: 16px;
      }
      &:last-of-type{
        margin-left: 16px;
      }
    }
  }
}


</style>